<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import MyAxios from "../plugins/myAxios.ts";


const router = useRouter()
const bgImage = ref<HTMLImageElement>()
const DEFAULT_WIDTH = 1388.84
const DEFAULT_LEFT = 955
const DEFAULT_LEFT_TWO =1140


const button_image_left_1 = ref(DEFAULT_LEFT + "px")
const button_image_left_2 = ref(DEFAULT_LEFT_TWO + "px")


onMounted(() => {
  MyAxios.get('/user/group')
      .then(response => {
        if(!response.data.data){

          // router.push('/user/search')
        }
      })
      .catch(error => {
        console.log(error)
      })
})




const onClickRight = () => {
  router.push('/GroupSearch')
}

const onClick1 = () => {
  // router.push('/principalInteriorOne')
  router.push('/user/login')
}

const onClick2 = () => {
  // router.push('/principalInteriorOne')
  router.push('/user/register')

}

onMounted(() => {
  const $element = bgImage.value
  if ($element) {
    $element.addEventListener("load", () => {
      const { width} = $element.getBoundingClientRect()
      const rate = width / DEFAULT_WIDTH
      button_image_left_1.value = `${rate * DEFAULT_LEFT}px`
      button_image_left_2.value = `${rate * DEFAULT_LEFT_TWO}px`
    })
  }
})



</script>

<template>
  <div id="building">
    <van-nav-bar class="nav-bar"
                 title="宗门"
                 @click-right="onClickRight"
    >
      <!--      搜索框-->
      <template #right>
        <van-icon name="search" size="18"/>
      </template>
    </van-nav-bar>

    <div id="background-wrapper">
      <div id="background-container">
        <img ref="bgImage" alt="" id="background-img" src="../assets/长背景.png">
      </div>

      <div id="main-container1">
        <van-image
            width="250%"
            height="110%"
            src="src/assets/宗门图标1.png"
            @click="onClick1"
        />
      </div>

      <div id="main-container2" >
        <van-image
            width="190%"
            height="70%"
            src="src/assets/宗门图标2.png"
            @click="onClick2"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>

#building {
  width: 100%;
  height: 100%;
}

#background-wrapper {
  overflow-y: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

#main-container1 {
  position: absolute;
  left: v-bind(button_image_left_1);
  top: 48%;
  width: 10%;
  height: 10%;
}


#main-container2 {

  position: absolute;
  left: v-bind(button_image_left_2);
  top: 48%;
  width: 10%;
  height: 10%;
}

#background-img {
  height: 100%;
}

#background-container{
  width: 100%;
  height: 100%;
  position: relative;
}
.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 0.6
}

</style>